<template>
  <div class="shopping-cart-container">
    <!-- 可领的券信息 -->
    <Coupon />
    <!-- 如果当前有商品信息 -->
    <div v-show="goodsNum > 0">
      <!-- 头消息 -->
      <CartTitle class="mt-10" />
      <!-- 优惠促销信息 -->
      <Discount />
      <!-- 商品信息 -->
      <GoodsList class="mt-10" />
      <!-- 商品结算 -->
      <BalanceAccount class="mt-10" />
    </div>
    <!-- 无数据的展示 -->
    <div class="empty" v-show="goodsNum == 0">
      <div class="icon-cart"></div>
      <div class="title">购物车还是空滴</div>
      <div class="button" @click="toHomePageHandler()">继续逛</div>
    </div>
    <!-- 猜你喜欢 -->
    <GuessYouLike class="mt-40" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Coupon from '@components/cart/Coupon'
import CartTitle from '@components/cart/CartTitle'
import Discount from '@components/cart/Discount'
import GoodsList from '@components/cart/GoodsList'
import GuessYouLike from '@components/GuessYouLike'
import BalanceAccount from '@components/cart/BalanceAccount'

export default {
  computed: {
    ...mapGetters(['goodsNum'])
  },

  methods: {
    /**
     * 跳转到首页
     */
    toHomePageHandler () {
      this.$router.push('/')
    }
  },

  components: {
    Coupon,
    CartTitle,
    Discount,
    GoodsList,
    GuessYouLike,
    BalanceAccount
  }
}
</script>

<style lang="less" scoped>
@import "../styles/variable";

.shopping-cart-container {
  width: 1100px;
  margin: 0 auto;
  padding: 10px 0px;
  .empty {
    align-items: center;
    border: 1px solid @border-grey;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 460px;
    justify-content: center;
    margin-top: 10px;
    .icon-cart {
      background-position: 0 -570px;
      background-image: url(http://yanxuan-static.nosdn.127.net/hxm/yanxuan-web/p/20150730/style/img/x1/icon-empty-s545adfbb0c-16fa2eeb53.png);
      background-repeat: no-repeat;
      width: 180px;
      height: 180px;
    }
    .title {
      color: @font-color-grey;
      font-size: 16px;
    }
    .button {
      background-color: #f5f3ef;
      border: 1px solid @font-color-golden;
      color: @font-color-golden;
      cursor: pointer;
      font-size: 16px;
      height: 40px;
      width: 100px;
      line-height: 38px;
      margin-top: 20px;
      text-align: center;
    }
  }
}
</style>
